<template>
  <a-row class="j-select-biz-component-box" type="flex" :gutter="8">
    <a-col :span="24">


        <a-input style="width: 100%" >
<!--          <span slot="prefix">23233</span>-->
          <a-tag slot="prefix" closable @close="preventDefault" v-for="i in selectValue">
            {{ i.name }}
          </a-tag>
          <span slot="suffix" @click="xuanze" class="xuanze" >选择</span>
        </a-input>

    </a-col>



<!--    <listModal

      :visible.sync="visible"

    />-->
    <listModal ref="listmodal" :customerId="customerId" @ok="submitCallback"></listModal>
<!--    <a-modal :visible.sync="visible"></a-modal>-->
  </a-row>
</template>

<script>
  import listModal from '@/components/LIANXIREN/modal/listModal.vue'

  export default {
    name: 'index',
    components: { listModal },
    props: {
      customerId:{
        type: String,
        required: true
      }

    },
    data() {
      return {
        value:'',
        selectValue: [],
        selectOptions: [],
        dataSourceMap: {},
        visible: false,
        selectOpen: false,
      }
    },
    computed: {

    },
    watch: {

    },
    created() {
      console.log('this.customerId',this.customerId)
      /* this.$nextTick(()=>{

      }) */
    },
    mounted() {
      // this.$refs.listmodal.loadList(this.customerId)
    },
    methods: {
      handleChange(value) {
        console.log(`Selected: ${value}`);
      },
      xuanze(){
        console.log('11111')
        this.$refs.listmodal.add()
      },
      preventDefault(e){
        // e.preventDefault();
        console.log(e)
        console.log('Clicked! But prevent default.');
      },
      submitCallback(e){
        console.log('输入框级回调',e)
        this.selectValue = e
      }
    }
  }
</script>

<style lang="less" scoped>
  .j-select-biz-component-box {

    @width: 82px;

    .left {
      width: calc(100% - @width - 8px);
    }

    .right {
      width: @width;
    }

    .full {
      width: 100%;
    }

    /deep/ .ant-select-search__field {
      display: none !important;
    }
  }
  .xuanze{
    color: #00A0E9;
  }
  /deep/ .ant-input-affix-wrapper .ant-input-prefix{
    left: 5px !important;
    right: 5px;
  }
  /deep/ .ant-tag{
    margin-right: 5px;
  }
</style>